<template>
<div class="dy-main EAccountDtail">
  <div class="dy-header">
    <x-header :right-options="{showMore: false}"  :left-options="{backText: '',preventGoBack: true}" @on-click-more="showMenus = true" @on-click-back="back">E账户详情</x-header>
  </div>
  <div class="dy-body">
    <div class="bandcard">绑定银行卡列表</div>
    <div class="dyresult" v-for="(list,listIndex) in lists" :key="listIndex">
      <div class="financial-buy-result">
        <div class="financial-buy-result-detail">
          <div class="overBang" @click="overBang(listIndex)">解绑</div>
          <div><div class="result-item-left">{{list.bankName}}</div><div class="result-item-right">{{list.bindCard}}</div></div>
        </div>
      </div>
    </div>
    <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask position="middle">{{errormssg}}</toast>
    <div class="btn">
          <x-button type="primary" @click.native="gotoEAccountApprove">新增绑定</x-button>
    </div>
  </div>
</div>
</template>

<script>

export default {
  data () {
    return {
      errormssg: '', // 错误提示信息
      showPositionValue: false, // 提示解绑信息
      overReturn: '', // 解绑返回
      lists: [],
      returnData: [],
      clickOne: false // 防重点击
    }
  },
  computed: {
    // getEAccountInfo () {
    //   return this.$store.getters.getEAccountInfo
    // },
    getHongxin () {
      return this.$store.getters.getHongxin
    },
    getcustId () {
      return this.$store.getters.getcustId
    }
  },
  methods: {
    // setEAccountList () {
    //   this.lists = this.getEAccountInfo
    // },
    overBang (index) { // 解绑方法
      if (this.clickOne) return true
      this.clickOne = true
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'openBindingEAccountCard', 'basic_Data': JSON.stringify({acctNo: this.lists[index].acctNo, bindCard: this.lists[index].bindCard})}
        }),
        (response) => {
          // alert(response)
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.errormssg = '解绑申请已提交'
            this.showPositionValue = true
            if (this.lists.length > 1) {
              this.lists.splice(index, 1)
            } else {
              this.errormssg = '最后一张卡不可解绑啦'
              this.showPositionValue = true
            }
          } else {
            this.errormssg = '解绑申请提交失败'
            this.showPositionValue = true
          }
          this.clickOne = false
        })
    },
    back () {
      this.$publicFun.goBack(this)
    },
    gotoEAccountApprove: function () {
      this.$store.commit('changeHongxin', 1)
      this.$router.push({name: 'EAccountMessageSure'})
    },
    getData () { // 绑定查询接口
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryBindingEAccountList', 'basic_Data': JSON.stringify({'clientNo': this.getcustId()})}
        }),
        (response) => {
          alert(response)
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            let len = rep.body.arrays.length
            for (let i = 0; i < len; i++) {
              if (rep.body.arrays[i].status === '0') {
                this.lists.push(rep.body.arrays[i])
              }
            }
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    }
  },
  created () {
    if (this.getHongxin !== '') {
      this.$store.commit('changeHongxin', '')
    }
    // this.lists[0].cardNo = this.$route.query.cardNo
    // this.lists[0].cardInsName = this.$route.query.cardInsName
  },
  mounted () {
    this.getData()
    // this.setEAccountList()
  }

}
</script>
<style lang="less">
.EAccountDtail {
  .btn{
    padding: .32rem .6rem;
  }
  .result {
    font-size:0.3rem;
    font-family:PingFang-SC-Bold;
    color:rgba(51,51,51,1);
    line-height:0rem;
    margin:.42rem 0 .33rem .32rem;
  }
  .bandcard {
    margin:.3rem 0 .3rem .3rem;
  }
  .financial-buy-result{
    text-align: center;
    font-size: .3rem;
    border-bottom:1px solid #eee;
    .financial-buy-result-detail{
      font-size:.28rem;
      padding-left: .3rem;
      background: #fff;
      position: relative;
      .overBang{
        position:absolute;
        top: .25rem;
        right: .2rem;
        width: 1rem;
        line-height: .4rem;
        font-size: .24rem;
        background: #EC1B30;
        color: white;
        text-align: center;
        border-radius: .1rem;
        height:.4rem;
        padding-left:.15rem;
      }
    }
    .financial-buy-result-detail>div{
      height:0.88rem;
      line-height: .88rem;
      padding-right:.2rem;
      overflow: hidden;
      .result-item-left{
        /* display:inline-block; */
        width:1.2rem;
        float: left;
        color:rgba(153,153,153,1);
      }
      .result-item-right{
        display:inline-block;
        text-align: left;
        width:4rem;
        color:rgba(51,51,51,1);
        font-size:.26rem;
        padding-right: 1.4rem;
      }
    }
  }
  .eaccount-result-button{
    width: 3.4rem;
    height: .88rem;
    margin: 0 auto;
    line-height: .88rem;
    font-size: .34rem;
    color: #FFF;
    text-align: center;
    background: #EC1B30;
    border-radius: 0.06rem;
    margin-top:.8rem;
  }
}
</style>
